<template>
  <div class="department">
    <page-search
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
      :search-config="searchConfig"
    />
    <page-content
      ref="contentRef"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
      :content-config="contentCofig"
    >
      <template #leader="scope">
        <span class="leader">{{ scope.row[scope.prop] }}</span>
      </template>
    </page-content>
    <page-modal ref="modalRef" :modal-config="modalConfigRef"></page-modal>
  </div>
</template>

<script setup lang="ts">
import usePageContent from "@/hooks/usePageContent"
import usePageModal from "@/hooks/usePageModal"
// import { computed,ref } from "vue"
import { computed } from "vue"
import pageSearch from "@/components/page-search/page-search.vue"
// import pageContent from "@/components/page-content/page-content.vue"
// import pageContent from "@/components/page-content/page-content.vue"
// import pageModal from "./c-cpns/page-modal.vue"
// import pageModal from "@/components/page-modal/page-modal.vue"
import searchConfig from "./config/search.config"
import contentCofig from "./config/content.config"
import modalConfig from "./config/modal.config"
import useMainStore from "@/stores/main/main"
//
const modalConfigRef = computed(() => {
  const mainStore = useMainStore()
  const departments = mainStore.entireDepartments.map((item) => {
    return { label: item.name, value: item.id }
  })
  modalConfig.formItems.forEach((item) => {
    if (item.prop === "parentId") {
      item.options.push(...departments)
    }
  })
  return modalConfig
})

// setup相同逻辑的抽取hooks
//使用hooks
const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
// const contentRef = ref<InstanceType<typeof pageContent>>()
// // 点击搜索
// function handleQueryClick(queryInfo: any) {
//   contentRef.value?.fetchPageListDate(queryInfo)
// }
// // 重置
// function handleResetClick() {
//   contentRef.value?.fetchPageListDate()
// }
//点击modal
const { modalRef, handleNewClick, handleEditClick } = usePageModal()
// const modalRef = ref<InstanceType<typeof pageModal>>()
// function handleNewClick() {
//   modalRef.value?.setModalVisible(true)
// }
// function handleEditClick(itemData: any) {
//   modalRef.value?.setModalVisible(false, itemData)
// }
</script>
<style scoped lang="less">
.leader {
  color: red;
}
</style>
